<template>
  <div class="son">
    this is son
    <!-- 渲染页面不需要加props -->
    <p>father send----- {{ msg1 }} ----{{ send }}----{{ attrs.num }}</p>
    <button @click="handleSend">子传父发送数据</button>
  </div>
</template>

<script setup>
// defineProps相当于vue2的props 接收父传子的参数
// useAttrs 相当于vue2的this.$attrs
// defineEmits相当于vue2的emit
// defineOptions里可以使用vue2的语法
// defineExpose 将子组件的变量和方法到导出 然后在父组件通过ref调用导出的方法和数据
import { defineProps, useAttrs, defineEmits, ref, defineOptions, defineExpose } from 'vue';
// 接收父传子的参数
const props = defineProps({
  // 接收
  msg1: {
    type: String
  },
  send: {
    type: String
  }
})
// 在ts中使用msg1需要通过props调用 不能直接用
console.log(props.msg1)

const attrs = useAttrs()
// 注意userAttrs和props冲突 被props接收的数据不会再被attrs接收
console.log(attrs, 'attrs')

const son = ref('get100gardes')
const son1 = ref('get60gardes')
// 子传父 自定义名字 要现在defineEmits中注册一下
let emit = defineEmits(['handleA', 'handleB'])
const handleSend = () => {
  emit('handleA', son.value)
  emit('handleB', son1.value)
}
// 导出
let son3 = ref('third buy benchi')
let handleY = () => {
  console.log('thied buy car');
}
defineExpose({
  son3, handleY
})


// 使用vue2的语法
defineOptions({
  data() {
    return {}
  },
  methods: {

  }
})
</script>

<style lang="scss" scoped>
.son {
  background-color: aqua;
}
</style>